<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="favicon.ico" />
    <title>Vue Router demo:Nested Routes</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@2.7/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <!-- Nested Routes -->
    <div id="app">
      <!-- 这里的 <router-view> 是最顶层的出口，
        渲染最高级路由匹配到的组件。
        同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。
        例如，在 User 组件的模板添加一个 <router-view> -->
      <router-link to="/">Go to Home route</router-link>
      <router-link to="/user/2">Go to /user/:id path</router-link>
      <router-link to="/user/2/">Go to /user/:id Home path</router-link>
      <router-link to="/user/3/profile"
        >Go to /user/:id sub /profile</router-link
      >
      <router-link to="/user/3/posts">Go to /user/:id sub /posts</router-link>
      <router-link to="/user/4/dd">Go to /user/:id not found/</router-link>
      <router-view></router-view>
      <button @click="backToMain">back</button>
    </div>
    <script>
      const Root = {
        template: `
            <div>
              Root              
              </div>`,
      };
      const User = {
        template: `
            <div class="user">
                <div>User {{ $route.params.id }}</div>
                <router-view></router-view>
            </div>
            `,
      };
      const NotFoundMain = {
        template: `
        <div>not  found Component outer</div>
        `,
      };
      const UserProfile = {
        template: `  
        <div>UserProfile Component</div>
        `,
      };
      const UserPosts = {
        template: `
        <div>UserPosts Component</div>
        `,
      };
      const UserHome = {
        template: `
        <div>Home Component(empty route)</div>
        `,
      };
      const NotFound = {
        template: `
        <div>not found Component</div>
        `,
      };
      // 要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
      // 要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
      const router = new VueRouter({
        routes: [
          {
            path: "/",
            component: Root,
          },
          {
            path: "/user/:id",
            component: User,
            children: [
              // 你会发现，children 配置就是像 routes 配置一样的路由配置数组,所以呢，你可以嵌套多层路由。
              // 此时，基于上面的配置，当你访问 /user/foo 时，
              // User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。
              // 如果你想要渲染点什么，可以提供一个 空的 子路由：
              // 当 /user/:id 匹配成功，
              // UserHome 会被渲染在 User 的 <router-view> 中
              { path: "/", component: UserHome },
              //   { path: "", component: UserHome },
              {
                // 当 /user/:id/profile 匹配成功，
                // UserProfile 会被渲染在 User 的 <router-view> 中
                path: "profile",
                component: UserProfile,
              },
              {
                // 当 /user/:id/posts 匹配成功
                // UserPosts 会被渲染在 User 的 <router-view> 中
                path: "posts",
                component: UserPosts,
              },
              // 此处匹配/user/:id/xxxxx
              {
                path: "*",
                component: NotFound,
              },
            ],
          },
          {
            path: "*",
            component: NotFoundMain,
          },
        ],
      });
      const app = new Vue({
        router,
        methods: {
          backToMain() {
            window.location = "https://yzyyna.github.io/vue_router_demo";
          },
        },
      }).$mount("#app");
    </script>
  </body>
</html>
